 h1,
 h2 {
     font-size: 24px;
     text-align: center;
 }

 .box1 {
     width: 400px;
     height: 280px;
     margin: auto;
     background-color: skyblue;
     border: 2px solid black;
     border-radius: 20px;
 }

 .circle {
     display: inline-block;
     width: 50px;
     height: 50px;
     line-height: 50px;
     text-align: center;
     color: white;
     margin: 5px auto;
     margin-right: 5px;
     border: 2px solid red;
     border-radius: 50%;
 }

 .circle:nth-child(2n) {
     background-color: black;
 }

 .circle:nth-child(odd) {
     background-color: blue;
 }

 .box2 {
     width: 500px;
     height: 400px;
     margin: auto;
     overflow: hidden;
 }

 .front-ele,
 .back {
     display: inline-block;
     width: 40px;
     height: 40px;
     line-height: 40px;
     text-align: center;
     margin: 3px;
     color: white;
     shape-outside: margin-box;
     border-radius: 50%;
 }

 .front-ele {
     background-color: black;
 }

 .back {
     background-color: blue;
 }

 img {
     width: 100px;
     margin: 0;
     padding: 0;
     float: left;
 }

 .box3 {
     text-align: center;
     width: 400px;
     margin: auto;
     background-color: skyblue;
 }

 .return {
     text-decoration: none;
     float: left;
 }

 .next {
     text-decoration: none;
     float: right;
 }

 #monkey {
     width: 200px;
     display: block+;
     margin: 20px auto;
 }

 #monkey img {
     width: 200px;
     border: 10px solid red;
 }